<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 网页头部搜索引擎三大标签 -->
    <!-- 标题 -->
    <title>23软件技术2班_23003007_李冠林_轮播图与代办列表</title>
    <!-- 描述 -->
    <meta name="description" content="这是js作业,代办列表与轮播图" />
    <!-- 关键词 -->
    <meta name="keywords" content="null" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
      integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/common.css " />
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <!-- 快捷导航区域 -->
    <div class="shortcut">
      <div class="wrapper">
        <ul>
          <li>
            <a
              href="https://gitee.com/LynLuc/rotation-chart-and-proxy-list"
              target="_blank"
              class="login"
              >码云仓库</a
            >
          </li>
          <li><a href="#">待定列表</a></li>
          <li><a href="#">待定列表</a></li>
          <li><a href="#">待定列表</a></li>
          <li><a href="#">待定列表</a></li>
          <li><a href="#">待定列表</a></li>
          <li>
            <a href="#"><i class="fa fa-mobile-phone iconfont"></i>手机版</a>
          </li>
        </ul>
      </div>
    </div>
    <!-- 头部区域 -->
    <div class="header wrapper">
      <!-- logo -->
      <div class="logo"><img src="images/logo.png" alt="logo" /></div>
      <!-- 导航 -->
      <div class="nav">
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">待定</a></li>
          <li><a href="#">待定</a></li>
          <li><a href="#">待定</a></li>
          <li><a href="#">待定</a></li>
          <li><a href="#">待定</a></li>
          <li><a href="#">待定</a></li>
          <li><a href="#">待定</a></li>
          <li><a href="#">待定</a></li>
        </ul>
      </div>
      <!-- 搜索 -->
      <div class="search">
        <span class="iconfont icon-search"></span
        ><input type="text" placeholder="搜一搜" />
      </div>
      <!-- 购物车 -->
      <div class="cart">
        <span class="fa fa-cart-plus iconfont"></span><i>3</i>
      </div>
    </div>

    <!-- banner区域 -->
    <div class="banner">
      <div class="wrapper">
        <!-- 图片 -->
        <ul class="pic">
          <li>
            <a href="#"><img src="uploads/banner1.png" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="uploads/banner1.png" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="uploads/banner1.png" alt="" /></a>
          </li>
        </ul>
        <!-- 轮播图圆点 -->
        <ul class="select" id="carousel-selectors">
          <li class="selected" data-index="0"><i></i></li>
          <li data-index="1"><i></i></li>
          <li data-index="2"><i></i></li>
        </ul>
        <!-- 侧导航 -->
        <div class="subnav">
          <ul>
            <li>
              <a href="#">
                <div><span>生鲜</span><span>水果</span><span>蔬菜</span></div>
                <span class="fa fa-angle-right"></span>
              </a>
            </li>
            <li>
              <a href="#">
                <div><span>美食</span><span>面点</span><span>干果</span></div>
                <span class="fa fa-angle-right"></span>
              </a>
            </li>
            <li>
              <a href="#">
                <div><span>餐厨</span><span>数码产品</span><span></span></div>
                <span class="fa fa-angle-right"></span>
              </a>
            </li>
            <li>
              <a href="#">
                <div>
                  <span>电器</span><span>床品</span><span>四件套</span
                  ><span>被枕</span>
                </div>
                <span class="fa fa-angle-right"></span>
              </a>
            </li>
            <li>
              <a href="#">
                <div>
                  <span>居家</span><span>奶粉</span><span>玩具</span
                  ><span>辅食</span>
                </div>
                <span class="fa fa-angle-right"></span>
              </a>
            </li>
            <li>
              <a href="#">
                <div>
                  <span>洗护</span><span>洗发</span><span>洗护</span
                  ><span>美妆</span>
                </div>
                <span class="fa fa-angle-right"></span>
              </a>
            </li>
            <li>
              <a href="#">
                <div><span>孕婴</span><span>奶粉</span><span>玩具</span></div>
                <span class="fa fa-angle-right"></span>
              </a>
            </li>
            <li>
              <a href="#">
                <div><span>服饰</span><span>女装</span><span>男装</span></div>
                <span class="fa fa-angle-right"></span>
              </a>
            </li>
            <li>
              <a href="#">
                <div><span>杂货</span><span>户外</span><span>图书</span></div>
                <span class="fa fa-angle-right"></span>
              </a>
            </li>
            <li>
              <a href="#">
                <div><span>品牌</span><span>品牌制造</span><span></span></div>
                <span class="fa fa-angle-right"></span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="todoarea">
      <div class="wrapper todo">
        <div class="col">
          <form id="search-form" onsubmit="return false;">
            <input
              id="search-input"
              class="input-lg"
              placeholder="添加列表"
              autocomplete="off"
              spellcheck="false"
              autocorrect="off"
              tabindex="1"
            />
            <a href="#" class="addclick" onclick="addTodo(event)">
              <div>
                <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
              </div>
            </a>
          </form>
        </div>
        <ul id="todoList"></ul>
      </div>
    </div>

    <!-- foot区域 -->
    <div class="footer">
      <div class="wrapper">
        <!-- 服务区域 -->
        <div class="service">
          <ul>
            <li>
              <h5></h5>
              <p>价格亲民</p>
            </li>
            <li>
              <h5></h5>
              <p>物流快捷</p>
            </li>
            <li>
              <h5></h5>
              <p>品质新鲜</p>
            </li>
            <li>
              <h5></h5>
              <p>售后无忧</p>
            </li>
          </ul>
        </div>
        <!-- 帮助中心 -->
        <div class="help">
          <!-- 左右板块 -->
          <!-- 左板块文字帮助 -->
          <div class="left">
            <dl>
              <dt>购物指南</dt>
              <dd><a href="#">购物流程</a></dd>
              <dd><a href="#">支付方式</a></dd>
              <dd><a href="#">售后规则</a></dd>
            </dl>
            <dl>
              <dt>配送方式</dt>
              <dd><a href="#">配送运费</a></dd>
              <dd><a href="#">配送范围</a></dd>
              <dd><a href="#">配送时间</a></dd>
            </dl>
            <dl>
              <dt>关于我们</dt>
              <dd><a href="#">平台规则</a></dd>
              <dd><a href="#">联系我们</a></dd>
              <dd><a href="#">问题反馈</a></dd>
            </dl>
            <dl>
              <dt>售后服务</dt>
              <dd><a href="#">售后政策</a></dd>
              <dd><a href="#">退款说明</a></dd>
              <dd><a href="#">取消订单</a></dd>
            </dl>
            <dl>
              <dt>服务热线</dt>
              <dd>
                <a href="#"
                  >在线客服<span class="iconfont icon-customer-service"></span
                ></a>
              </dd>
              <dd><a href="#">客服电话 400-0000-000</a></dd>
              <dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd>
            </dl>
          </div>
          <!-- 右板块二维码 -->
          <div class="right">
            <ul>
              <li>
                <img src="images/wechat.png" alt="" class="pic" />
                <p>微信公众号</p>
              </li>
              <li>
                <img src="images/wechat.png" alt="" class="pic" />
                <p>APP下载二维码</p>
              </li>
            </ul>
          </div>
        </div>
        <!-- 版权区域 -->
        <div class="copyright">
          <p>
            <a href="#">关于我们</a>| <a href="#">帮助中心</a>|
            <a href="#">售后服务</a>| <a href="#">配送与验收</a>|
            <a href="#">商务合作</a>| <a href="#">搜索推荐</a>|
            <a href="#">友情链接</a>
          </p>
          <p>CopyRight © xxx</p>
        </div>
      </div>
    </div>
    <script src="js\index.js"></script>
    <script src="js/carousel.js"></script>
  </body>
</html>
